<template>
    <!-- 面包屑 -->
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>
            <a href="/">事件处置</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>我的待办</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 查询区域 -->
    <div style="border: solid 1px #ccc ; padding: 20px; margin: 12px; min-width: 300px;">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">

            <el-form-item label="行业">
                <el-select @change="getCategorys()" v-model="formInline.IndustryId" placeholder="请选择行业" clearable>
                    <el-option v-for="item in industrys" :label="item.industryName" :value="item.id" />
                </el-select>
            </el-form-item>


            <el-form-item label="流程类别">
                <el-select @change="getForms" v-model="formInline.CategoryCode" placeholder="请选择类别" clearable>
                    <el-option v-for="item in categorys" :label="item.formCategoryName"
                        :value="item.formCategoryCode" />
                </el-select>
            </el-form-item>

            <el-form-item label="流程表单">
                <el-select @change="GetFormFields()" v-model="formInline.FormId" placeholder="请选择流程表单" clearable>
                    <el-option v-for="item in forms" :label="item.formName" :value="item.id" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="search">查询</el-button>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
    <!--  我的流程列表 -->
    <div style="border: solid 1px #ccc ; padding: 20px; margin: 12px; min-width: 300px;">
        <!-- {{ tableData }} -->
        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="formCode" label="表单编号" width="100" />
            <el-table-column prop="formName" label="表单名称" width="200" />
            <el-table-column prop="processName" label="流程名称" width="200" />
            <el-table-column prop="currentNodeName" label="当前节点名称" width="200" />
            <el-table-column prop="status" label="状态" width="200">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 0" type="success">申请</el-tag>
                    <el-tag v-if="scope.row.status == 1" type="danger">处理中</el-tag>
                    <el-tag v-if="scope.row.status == 2" type="primary">完成</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="currentOperatorName" label="当前操作人员" width="120" />
            <el-table-column prop="updateTime" label="操作时间" width="120">
                <template #default="scope">
                    {{ moment(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}
                </template>
            </el-table-column>

            <el-table-column fixed="right" label="操作" min-width="120">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="OpenOperaDialog(scope.row)">
                        操作
                    </el-button>

                </template>
            </el-table-column>
        </el-table>

    </div>





    <el-dialog :title="currentInstanceRow.processName" v-model="operaDialog" width="1100">
        <!-- {{ instanceContents }} -->

        <el-form :inline="true" :model="formInline" class="demo-form-inline" style="width:1200px">


            <template v-for="field in instanceContents" style="width:900px">

                <el-form-item v-if="field.fieldComponent == 1" :label="field.fieldDes" style="width:300px">
                    <el-input v-model="field.fieldValue" placeholder="" clearable :disabled="true" />
                </el-form-item>
                <el-form-item v-if="field.fieldComponent == 2" :label="field.fieldDes" style="width:300px">
                    <el-date-picker v-model="field.fieldValue" type="date" placeholder="Pick a date" clearable
                        :disabled="true" />
                </el-form-item>
                <el-form-item v-if="field.fieldComponent == 3" :label="field.fieldDes" style="width:300px">
                    <el-input v-model="field.fieldValue" placeholder="" show-password width="280" clearable
                        :disabled="true" />
                </el-form-item>
                <el-form-item v-if="field.fieldComponent == 4" :label="field.fieldDes" style="width:300px">
                    <el-select v-model="field.fieldValue" :placeholder="'请选择' + field.fieldDes" clearable
                        :disabled="true">
                        <el-option v-for="item in JSON.parse(field.fieldOptions) " width="280" :label="item.value"
                            :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item v-if="field.fieldComponent == 5" :label="field.fieldDes" style="width:300px"
                    :disabled="true">
                    <el-radio-group v-model="field.fieldValue">
                        <el-radio v-for="item in JSON.parse(field.fieldOptions)" :value="item.value">{{ item.value
                            }}</el-radio>
                    </el-radio-group>
                </el-form-item>

                <!-- <el-form-item v-if="field.fieldComponent == 7" :label="field.fieldDes" width="280">
                    <el-checkbox-group :v-model="JSON.parse(field.fieldValue||'[]')">
                            <el-checkbox v-for="item in JSON.parse(field.fieldOptions)"  :value="item.value" name="type">
                            {{ item. value}}
                            </el-checkbox> 
                            </el-checkbox-group>
              </el-form-item>  -->

                <el-form-item v-if="field.fieldComponent == 8" :label="field.fieldDes" style="width:300px">
                    <el-input v-model="field.fieldValue" type="textarea" :disabled="true" />
                </el-form-item>

            </template>
           
 <el-timeline style="max-width: 600px">
    <el-timeline-item v-for="r in recards" :timestamp="moment(r.createdTime).format('YYYY/MM/DD HH:mm:ss')  " placement="top">
      <el-card>
        <h4>{{ r.nodeName }}</h4>
        <p>{{ r.operatorOpinion }} @{{r.operatorName}}  </p>
      </el-card>
    </el-timeline-item>
    
  </el-timeline>
{{ recards }}


            <br>
            <el-form-item label="审批意见" style="width:800px">
                <el-input v-model="examineParams.operatorOpinion" type="textarea" />
            </el-form-item>
            <br>
            <el-form-item>
                <el-button type="primary" @click="execEvent(1)">同意</el-button>
                <el-button type="danger" @click="execEvent(0)">拒绝</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>

</template>

<script lang="ts" setup>
import myAxios from '@/http/axiosHelper';
import { ElMessage } from 'element-plus';
import { onMounted, reactive, ref, watch } from 'vue'
import { useCounterStore } from '@/stores/counter';
import moment from 'moment'

const pinia = useCounterStore()

const formInline = reactive({
    FormId: null,
    NodeName: '',
    IndustryId: null, //查询列表的时候用不到
    CategoryCode: ''//查询列表的时候用不到,用于3级联动
})

const industrys = ref([])
const getIndustrys = () => {

    myAxios.get('/PERead/ProcessEngine/GetIndustry').then(res => {
        industrys.value = res.data.data
    })
    formInline.IndustryId = null;
}

const categorys = ref([{
    "id": 700061378039813,
    "formCategoryName": "邻里纠纷问题",
    "formCategoryCode": "T0001",
    "industryId": 3,
    "industryName": "教育"
}])
const getCategorys = () => {

    myAxios.get('/PERead/ProcessEngine/SearchFormCategory', { params: { IndustryId: formInline.IndustryId } }).then(res => {
        categorys.value = res.data.data
    })
    formInline.CategoryCode = ''
}


const forms = ref([{
    "id": 702835120816133,
    "formCode": "F00009",
    "formName": "学生请假流程(物联网学院)"
}])

const getForms = () => {

    myAxios.get('/PERead/ProcessEngine/GetFormPages', { params: { CategoryCode: formInline.CategoryCode } }).then(res => {
        forms.value = res.data.pageDatas
    })
    formInline.FormId = null
}

const page = reactive({
    PageIndex: 1,
    PageSize: 10,
    totalCount: 0
})
const tableData = ref([])
const search = () => {
    myAxios.get('/PERead/Instance/GetMyInstances', {
        params: {
            PageIndex: page.PageIndex,
            PageSize: page.PageSize,
            Me: pinia.loginDto.accountName,
            FormId: formInline.FormId
        }
    }).then(res => {
        tableData.value = res.data.pageDatas
        page.totalCount = res.data.totalCount
    })
}
const reset = () => {
    formInline.FormId = null
    formInline.IndustryId = null
    formInline.CategoryCode = ''
}


//操作流程
const operaDialog = ref(false)
const currentInstanceRow = ref('')
const instanceContents = ref(<any>[])
const OpenOperaDialog = (row: any) => {
    operaDialog.value = true;
    instanceContents.value = JSON.parse(row.formContent)
    currentInstanceRow.value = row
    examineParams.instanceId = row.id
    getRecards();
}
// const operatorOpinion = ref('')//审批意见
const examineParams = reactive(
    {
        "instanceId": null,
        "isAgree": true,
        "operatorOpinion": "",
        "accountName": "string"
    })

const execEvent = (flag: any) => {
    examineParams.isAgree = (flag == 1)
    examineParams.accountName = pinia.loginDto.accountName


    myAxios.post('/PEWrite/Instance/ExamineInstanceNode', examineParams).then(res => {
        if (res.data.code == 200) {
            ElMessage.success(res.data.msg);
            examineParams.operatorOpinion = '';
            operaDialog.value = false;

        } else {
            ElMessage.error(res.data.msg);
        }
    })

}


const recards  = ref([{
      "id": 705721750179845,
      "nodeName": "发起请假申请",
      "operatorName": "yinhuang",
      "operatorOpinion": "zhtyu新发起学生请假流程(物联网学院)流程",
      "approveStatus": 0,
      "createdTime": "2025-08-06T14:08:16.0439752"
    }])
const getRecards = ()=>{ 
    myAxios.get('/PERead/Instance/GetRecardList',{params:{InstanceId:examineParams.instanceId}}).then(res=>{
        recards.value = res.data.data
    })
}

onMounted(() => {
    search();
    getIndustrys();
    
})


</script>


<style>
.demo-form-inline .el-input {
    --el-input-width: 220px;
}

.demo-form-inline .el-select {
    --el-select-width: 220px;
}
</style>